<template>
  <el-aside width="200px">
    <el-menu @select="handleSelect" :default-active="activeMenu">
      <el-menu-item v-for="category in categories" :key="category.name" :index="category.name">
        <i :class="category.icon"></i>
        <span>{{ category.name }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElAside, ElMenu, ElMenuItem } from 'element-plus';

const router = useRouter();
const activeMenu = ref('');

const categories = ref([
  { name: '首页', icon: 'el-icon-s-home' },
  { name: '动漫', icon: 'el-icon-picture' },
  { name: '音乐', icon: 'el-icon-news' },
  { name: '体育', icon: 'el-icon-headset' },
  { name: '游戏', icon: 'el-icon-gamepad' },
]);

function handleSelect(index) {
  activeMenu.value = index;
  switch (index) {
    case '首页':
      router.push('/');
      break;
    case '动漫':
      router.push('/anime');
      break;
    case '音乐':
      router.push('/music');
      break;
    case '体育':
      router.push('/sports');
      break;
    case '游戏':
      router.push('/games');
      break;
    default:
      router.push('/');
  }
}
</script>

<style scoped>
.el-aside {
  background-color: #f5f7fa;
  border-right: 1px solid #e0e0e0;
}

.el-menu {
  width: 100%;
}
</style>